<template>
  <div id="cinema">
    <header>
      <div class="city">
        <span>南京</span>
        <img :src="img1" alt="" />
      </div>
      <div class="title">影院</div>
      <div class="search">
        <img :src="img2" alt="" />
      </div>
    </header>
    <div class="table_bar">
      <div class="lable">
        <span>全城</span>
        <img :src="img1" alt="" />
      </div>
      <div class="lable">
        <span>APP订票</span>
        <img :src="img1" alt="" />
      </div>
      <div class="lable">
        <span>最近去过</span>
        <img :src="img1" alt="" />
      </div>
    </div>

    <section>
      <ul>
        <li>
          <a href="">
            <div class="info">
              <span class="name">幸福蓝海梦幻影城</span>
              <span class="local">南京市秦淮区莫愁路329号</span>
            </div>
            <div class="price">
              <p>￥<span>29.5</span>起</p>
              <strong>距离未知</strong>
            </div>
          </a>
        </li>

        <li>
          <a href="">
            <div class="info">
              <span class="name">幸福蓝海梦幻影城</span>
              <span class="local">南京市秦淮区莫愁路329号</span>
            </div>
            <div class="price">
              <p>￥<span>29.5</span>起</p>
              <strong>距离未知</strong>
            </div>
          </a>
        </li>

        <li>
          <a href="">
            <div class="info">
              <span class="name">幸福蓝海梦幻影城</span>
              <span class="local">南京市秦淮区莫愁路329号</span>
            </div>
            <div class="price">
              <p>￥<span>29.5</span>起</p>
              <strong>距离未知</strong>
            </div>
          </a>
        </li>

        <li>
          <a href="">
            <div class="info">
              <span class="name">幸福蓝海梦幻影城</span>
              <span class="local">南京市秦淮区莫愁路329号</span>
            </div>
            <div class="price">
              <p>￥<span>29.5</span>起</p>
              <strong>距离未知</strong>
            </div>
          </a>
        </li>

        <li>
          <a href="">
            <div class="info">
              <span class="name">幸福蓝海梦幻影城</span>
              <span class="local">南京市秦淮区莫愁路329号</span>
            </div>
            <div class="price">
              <p>￥<span>29.5</span>起</p>
              <strong>距离未知</strong>
            </div>
          </a>
        </li>

        <li>
          <a href="">
            <div class="info">
              <span class="name">幸福蓝海梦幻影城</span>
              <span class="local">南京市秦淮区莫愁路329号</span>
            </div>
            <div class="price">
              <p>￥<span>29.5</span>起</p>
              <strong>距离未知</strong>
            </div>
          </a>
        </li>

        <li>
          <a href="">
            <div class="info">
              <span class="name">幸福蓝海梦幻影城</span>
              <span class="local">南京市秦淮区莫愁路329号</span>
            </div>
            <div class="price">
              <p>￥<span>29.5</span>起</p>
              <strong>距离未知</strong>
            </div>
          </a>
        </li>

        <li>
          <a href="">
            <div class="info">
              <span class="name">幸福蓝海梦幻影城</span>
              <span class="local">南京市秦淮区莫愁路329号</span>
            </div>
            <div class="price">
              <p>￥<span>29.5</span>起</p>
              <strong>距离未知</strong>
            </div>
          </a>
        </li>

        <li>
          <a href="">
            <div class="info">
              <span class="name">幸福蓝海梦幻影城</span>
              <span class="local">南京市秦淮区莫愁路329号</span>
            </div>
            <div class="price">
              <p>￥<span>29.5</span>起</p>
              <strong>距离未知</strong>
            </div>
          </a>
        </li>

        <li>
          <a href="">
            <div class="info">
              <span class="name">幸福蓝海梦幻影城</span>
              <span class="local">南京市秦淮区莫愁路329号</span>
            </div>
            <div class="price">
              <p>￥<span>29.5</span>起</p>
              <strong>距离未知</strong>
            </div>
          </a>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import img1 from "../assets/下载 (1).png";
import img2 from "../assets/下载.png";
import axios from "axios";
export default {
  name: "cinemaBar",
  data() {
    return {
      img1,
      img2,
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      axios({
        url: "https://m.maizuo.com/gateway?cityId=110100&ticketFlag=0&k=2102752",
        method: "get",
        params: {},
        headers: {
          "X-Client-Info":
            '{"a":"3000","ch":"1002","v":"5.0.4","e":"16179368764092240544661505","bc":"110100"}',
          "X-Host": "mall.film-ticket.film.list",
        },
      }).then((res) => {
        console.log(res);
      });
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
html {
  font-size: calc(100vw / 750);
}

#cinema {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-color: #fff;
}

header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 44rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid #ededed;
}

header .city {
  width: 15%;
  height: 100%;
  margin-left: 15rem;
  display: flex;
  align-items: center;
}

header .city span {
  display: inline-block;
  font-size: 13rem;
  max-width: 58px;
  height: 16rem;
  line-height: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-right: 5rem;
  color: #191a1b;
}

header .city img {
  width: 6rem;
  height: 3rem;
}

header .title {
  width: 70%;
  text-align: center;
  line-height: 44rem;
  height: 100%;
}

header .search {
  width: 15%;
  height: 100%;
  display: flex;
  margin-right: 15px;
  justify-content: flex-end;
  align-items: center;
}

header .search img {
  width: 18rem;
  height: 18rem;
}

.table_bar {
  position: fixed;
  left: 0;
  top: 45rem;
  width: 100%;
  height: 49rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  border-bottom: 1px solid #ededed;
}

.table_bar .lable {
  flex: 1;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.table_bar .lable span {
  line-height: 49px;
  font-size: 14px;
  color: #191a1b;
  letter-spacing: -0.2px;
}

.table_bar .lable img {
  width: 6rem;
  height: 3rem;
  margin-left: 5rem;
}

section {
  width: 100%;
  height: auto;
  margin-top: 94rem;
}

section ul {
  width: 100%;
  height: 100%;
  margin-bottom: 80rem;
}

section ul li {
  padding: 15rem;
  width: 100%;
  height: 75rem;
  box-sizing: border-box;
  display: flex;
  border-bottom: 1px solid #ededed;
}

section ul li a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
}

section ul li a .info {
  width: 640rem;
  height: 23rem;
  padding-right: 15rem;
}

section ul li a .info .name {
  color: #191a1b;
  font-size: 15rem;
  line-height: 23rem;
}

section ul li a .info .local {
  color: #797d82;
  font-size: 12rem;
  margin-top: 5rem;
  line-height: 23rem;
}

section ul li a .price {
  width: 70rem;
  text-align: center;
  margin-right: -5rem;
}

section ul li a .price p {
  font-size: 12rem;
  color: #ff5f16;
}

section ul li a .price p span {
  font-size: 15rem;
  color: #ff5f16;
}

section ul li a .price strong {
  font-weight: 400;
  display: block;
  margin-top: 5px;
  font-size: 11rem;
  color: #797d82;
}

footer {
  width: 100%;
  height: 49rem;
  border-bottom: 1px solid #ededed;
  background-color: white;
  position: fixed;
  left: 0;
  bottom: 0;
}

footer ul {
  display: flex;
}

footer ul a {
  width: 25%;
  height: 49rem;
}

footer ul a li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

footer ul a li span {
  font-size: 16rem;
  color: #797d82;
}

footer ul a li .icon-yingshi2,
footer ul a li .icon-yingyuan,
footer ul a li .icon-xinwenzixun,
footer ul a li .icon-my {
  font-size: 24rem;
  color: #797d82;
}

footer ul a li .active {
  color: #ff5f16;
}
</style>